import React from 'react'
import ReactDOM from 'react-dom'

/* 
  render props 模式
*/

// 导入图片资源
import img from './images/cat.png'
import Mouse from './components'


class App extends React.Component {
  render() {
    return (
      <div>
        <h1>render props 模式</h1>
        <Mouse>
          {mouse => {
            return (
              <p>
                鼠标位置：{mouse.x} {mouse.y}
              </p>
            )
          }}
        </Mouse>

        <Mouse>
          {mouse => (
            <img
              src={img}
              alt="猫"
              style={{
                position: 'absolute',
                top: mouse.y - 64,
                left: mouse.x - 64
              }}
            />
          )}
        </Mouse>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
